Vanilla JavaScript와 JQuery로 HTML 템플릿 문서 가져와서 사용하기

✒️ 2025-05-23 15:33 내용 수정

HTML, CSS, Javascript를 사용한 프론트엔드 팀 프로젝트(클론코딩 프로젝트)를 진행하던 중, 반복되는 HTML을 Javascript로 처리할 방법이 필요했다.
- 반복문을 쓰지 않으면 HTML 문서에 반복되는 코드가 몇 백 줄이나 들어간다.
방법을 찾던 중 HTML 문서에 다른 HTML 문서 내용을 가져오려면 vanilla Javascript에서 ajax를 사용하거나 JQuery의 $.get()을 사용하는 방법들이 있었다.
<template> 태그를 사용하여 vanilla Javascript와 JQuery로 문서를 가져오는 방법을 직접 테스트하고 비교해봤다.

1. 템플릿화 할 HTML 문서 생성하기

a. JQuery 사용 시

<div> 를 사용해서 탬플릿을 생성한다.
- <template> 태그 하위의 태그를 접근하려면 content 속성으로 접근하는데, 이 과정에서 JQuery 사용법을 잘 몰라 속성으로는 접근이 잘 되지 않았다.

<!-- videoContent.html -->
<div id="content-template">
    <div class="content">
        <div class="thumbnail-box">
            <img id="thumbnail-img" class="thumbnail-img" src="" alt="썸네일 이미지">
        </div>
        <div class="meta-info">
            <h3 id="video-title" class="video-title">제목</h3>
            <div class="channel-info">
                <span id="channel-name" class="channel-name">채널명</span>
            </div>
            <div class="video-stats">
                <span id="spectator-number" class="spectator-number">조회수</span>
                <span class="separator">•</span>
                <span id="upload-time" class="upload-time">업로드 시간</span>
            </div>
        </div>
    </div>
</div>

b. vanilla Javascript 사용 시

HTML에서 반복적으로 사용하는 태그를 HTML 파일로 생성한다.
HTML에는 <template> 태그가 존재하며, 브라우저 지원 여부에 따라 <template> 태그를 사용해서 관리할 수 있다.
- <template> 태그는 페이지를 불러온 순간 즉시 렌더링 되지는 않지만 JS를 사용하여 인스턴스를 생성할 수 있는 HTML 코드를 담을 수 있다.
- 참고 자료 : mdn web docs template tag

<!-- videoContent.html -->
<template id="content-template">
    <div class="content">
        <div class="thumbnail-box">
            <img id="thumbnail-img" class="thumbnail-img" src="" alt="썸네일 이미지">
        </div>
        <div class="meta-info">
            <h3 id="video-title" class="video-title">제목</h3>
            <div class="channel-info">
                <span id="channel-name" class="channel-name">채널명</span>
            </div>
            <div class="video-stats">
                <span id="spectator-number" class="spectator-number">조회수</span>
                <span class="separator">•</span>
                <span id="upload-time" class="upload-time">업로드 시간</span>
            </div>
        </div>
    </div>
</template>

개발자 도구 - 요소(Element)에선 확인할 수 있지만, 화면에 <template> 태그는 즉시 렌더링 되지 않습니다.

2. HTML 템플릿 문서를 넣을 대상 HTML 파일에 JS 설정하기

외부 JS 파일을 모듈로 불러오는 JS 파일을 script에 사용하려면 type=module 속성을 추가해야 한다.
JS 파일에서 JQuery를 사용해야 한다면 <script> 로 jquery cdn 코드를 추가해야 한다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Template Example</title>
    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js>"></script>
</head>
<body>
    <div id="contents"></div>
    <script src="js/loadTemplate.js"></script>
</body>
</html>

3. JS에서 HTML 문서 수정하기

a. JQuery 사용 시

데이터를 불러오는 부분을 $.get(url, fn) 으로 작성한다.

// 데이터
const info = [
    {title: '현재 재생목록에 추가', img_name: ''},
    {title: '나중에 볼 동영상에 저장', img_name: ''},
    {title: '재생목록에 저장', img_name: ''},
    {title: '오프라인 저장', img_name: ''},
    {title: '공유', img_name: ''},
    {title: '관심 없음', img_name: ''},
    {title: '채널 추천 안함', img_name: ''},
    {title: '신고', img_name: ''},
];

// 템플릿 html을 임시로 담을 div
const temp_div = document.createElement("div");

// JQuery로 문서 가져오기 - 바닐라 ajax로도 대체 가능
$.get("./homeComponents/html/videoContent.html", function(data) {
    // 문자열로 로드된 HTML을 DOM으로 파싱
    temp_div.innerHTML = data;

    // 템플릿 (div)
    const template = temp_div.querySelector("#template");
    // 타겟 태그
    const target = document.querySelector("#target");

		// 데이터를 순회하여 편집한 HTML을 타겟 태그에 담기
    info.forEach(el => {
        // 템플릿 내용 복제
        const clone = template.cloneNode(true);

        // 요소 수정
        clone.querySelector("#thumbnail-img").src = el.thumbnail;
        clone.querySelector("#video-title").textContent = el.title;
        clone.querySelector("#channel-name").textContent = el.uploader;
        clone.querySelector("#spectator-number").textContent = `조회수 ${el.spectators}`;
        clone.querySelector("#upload-time").textContent = el.uploaded_time;

        // 추가
        contents.appendChild(clone);
    })
});

b. `fetch()` 를 사용해서 불러오기

fetch()로 문서 파일을 가져와 사용할 수 있다.
- vanilla Javascript는 <template> 과 <div> 모두 사용할 수 있다.

const temp_div = document.createElement("div");

fetch("./homeComponents/html/videoContent.html")
.then(res => {
    if (!res.ok) {
        throw new Error("HTML template 불러오기 실패");
    }
    return res.text();
})
.then(data => {
    // 문자열로 로드된 HTML을 DOM으로 파싱
    temp_div.innerHTML = data;

    // 템플릿 태그
    const template = temp_div.querySelector("#content-template").content;
    const contents = document.querySelector("#contents");

    video_info.forEach(el => {
        // 템플릿 내용 복제
        const clone = template.cloneNode(true);

        // 요소 수정
        clone.querySelector("#thumbnail-img").src = el.thumbnail;
        clone.querySelector("#video-title").textContent = el.title;
        clone.querySelector("#channel-name").textContent = el.uploader;
        clone.querySelector("#spectator-number").textContent = `조회수 ${el.spectators}`;
        clone.querySelector("#upload-time").textContent = el.uploaded_time;

        // 추가
        contents.appendChild(clone);
    })
})

비디오 정보만 입력하고 템플릿 코드 하나를 반복문으로 출력하여 중복 코드를 줄일 수 있었다.

웹 브라우저에서 HTML 템플릿 문서 접근 문제

Javascript를 사용하여 HTML 템플릿 문서를 사용하여 반복되는 구조를 출력하는 작업을 위에서 진행했다.
이 방법은 정적 HTML 파일을 가져와 사용하기 때문에 웹 브라우저에서 해당 템플릿 문서로 접근하면 접속이 된다.
- HTML 문서(ex: header.html)를 가져와서 index.html 에 넣는 경우, 웹 브라우저에서 header.html에도 접근이 가능했다.
보안 문제 및 사용자 경험 상 템플릿 문서가 브라우저로 노출되는 일은 피하는 것이 좋다.

main_component_expose 1.PNG.png

main_component_expose 2.PNG.png

이를 해결하기 위해선 Node.js와 express를 사용하여 ejs을 include하는 방법으로 해결할 수 있다.
- Nodejs, Express 참고.
프론트엔드 팀 프로젝트에서 Node를 사용할까 고민했으나, 프로젝트 기간이 짧고, Node와 Express를 써보지 못한 팀원들도 있기 때문에 학습 시간을 만들 수 없는 상황이었다.
따라서 Javascript로 HTML 템플릿 문서를 가져오는 방법으로 진행했다.

1. 템플릿화 할 HTML 문서 생성하기

a. JQuery 사용 시

b. vanilla Javascript 사용 시

2. HTML 템플릿 문서를 넣을 대상 HTML 파일에 JS 설정하기

3. JS에서 HTML 문서 수정하기

a. JQuery 사용 시

b. fetch() 를 사용해서 불러오기

웹 브라우저에서 HTML 템플릿 문서 접근 문제

b. `fetch()` 를 사용해서 불러오기